<template>
	<div>
		<div class="item" v-for="(r, i) in revenueMonthly.data" :key=i>
			<p class="fl">{{r.time}}月收益总额</p>
			<p class="fr">￥{{r.money}}</p>
		</div>
		<!-- loading提示 -->
		<div class="nothing-tip" v-show="revenueMonthly.noData">暂无任何数据</div>
		<div class="middle-loading-tip" v-show="revenueMonthly.loading && page === 1">加载中…</div>
		<div class="bottom-loading-tip" v-show="revenueMonthly.loading && page > 1">加载中…</div>
		<div class="all-loaded-tip" v-show="revenueMonthly.allLoaded">加载完成</div>
	</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { loadMore, utcToDate } from '@/assets/js/utils.js'
export default{
	name:'RevenueMonthly',
	created(){
		this.getData()
		this.loadMore = new loadMore({cb: this.nextPage})
	},
	data(){
		return{
			page: 1,
			loadMore: ''
		}
	},
	computed:{
		...mapGetters(['revenueMonthly'])
	},
	methods:{
		...mapActions(['getRevenueMonthly']),
		async nextPage(){
			this.page++
			await this.getData()
		},
		async getData(){
			await this.getRevenueMonthly({page: this.page})
			this.loadMore.loading = false
			this.$nextTick(() => {
				if(document.body.scrollHeight > window.innerHeight && this.page == 1)
					this.loadMore.open()
				else if(this.revenueMonthly.allLoaded)
					this.loadMore.close()
			})
		}
	}
}
</script>
<style lang='less' scoped>
.item{
	background: #fff;
	border-bottom: 1px solid #DFDFDF;
	overflow: hidden;
	height: 1.33rem;
	line-height: 1.33rem;
	padding: 0 .3rem;
}
.item .fl{
	color: #666;
	font-size: 0.38rem;
}
.item .fr{
	color: #333;
	font-size: .42rem;
}
</style>